<template>
	<view class="component-cont" :style="useTheme.theme">
		<view class="ledger-query">
			<view class="ledger-query-radio" @click="radioActive = 1">
				<view :class="['ledger-query-radio-check', radioActive == 1 ? 'active' : '']"></view>
				<view class="ledger-query-radio-label">数值</view>
			</view>
			<view class="ledger-query-radio" @click="radioActive = 2">
				<view :class="['ledger-query-radio-check', radioActive == 2 ? 'active' : '']"></view>
				<view class="ledger-query-radio-label">环比</view>
			</view>
			<view class="ledger-query-radio" @click="radioActive = 3">
				<view :class="['ledger-query-radio-check', radioActive == 3 ? 'active' : '']"></view>
				<view class="ledger-query-radio-label">同比</view>
			</view>
		</view>
		<view class="ledger-calendar">
			<view :class="['ledger-calendar-item', calendarActive == index ? 'ledger-calendar-active' : '']"
				v-for="(item, index) in calendarList" :key="index" @click="calendarActive = index">
				<view class="ledger-calendar-item-day">{{item.day}}</view>
				<view class="ledger-calendar-item-money" v-if="item.money != 0&&radioActive == 1 ">{{item.money}}</view>
				<view class="ledger-calendar-item-money" v-if="item.huanbi != null&&radioActive == 2">{{item.huanbi}}
				</view>
				<view class="ledger-calendar-item-money" v-if="item.tongbi != null&&radioActive == 3">{{item.tongbi}}
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, getCurrentInstance, watch } from 'vue';
	const { proxy } = getCurrentInstance();
	import useThemeStore from '@/store/theme.js';
	const useTheme = useThemeStore()
	const radioActive = ref(1)
	const calendarActive = ref(0)
	const calendarList = ref([])


	// 监听用电明细：维度筛选
	watch(() => radioActive.value, (val) => {

	});
	// 监听用电明细：日历点击
	watch(() => calendarActive.value, (val) => {
		// console.log(calendarList.value[val].time);
	});

	initCalendar(null)

	// 获取日历数据
	function initCalendar(data) {
		
		const startMonth = proxy.dayjs().startOf('month').format("YYYY-MM-DD");//当月的第一天
		const endMonth = proxy.dayjs().endOf('month').format("YYYY-MM-DD");//当月的最后一天
		const startTime = proxy.dayjs(startMonth).startOf('week').add(1, 'day').format("YYYY-MM-DD");//当月第一天所在周的周一
		const endTime = proxy.dayjs(endMonth).endOf('week').add(1, 'day').format("YYYY-MM-DD");//当月最后一天所在周的周日
		const total = proxy.dayjs(endTime).diff(startTime, 'day');
		calendarList.value = [];
		for (let i = 0; i <= total; i++) {
			let time = proxy.dayjs(startTime).add(i, 'day').format("YYYY-MM-DD");
			let isDisabled = false;
			if (proxy.dayjs().isSame(time, 'day')) {
				// 默认选中当天
				calendarActive.value = i;
			}
			if (proxy.dayjs(startMonth).isAfter(time, 'day')) {
				// 当月之前的日期，不可选择
				isDisabled = true;
			}
			let money = 0;
			let tongbi = null;
			let huanbi = null;
			if (data != null && data.length > 0) {
				data.forEach(item => {
					if (item.time == time) {
						money = item.value;
						tongbi = item.tongbi;
						huanbi = item.huanbi;
					}
				})
			}
			calendarList.value.push({
				time: time,
				tongbi: tongbi,
				huanbi: huanbi,
				day: proxy.dayjs(time).date(),
				money: money,
				disabled: isDisabled
			});
		}
	}

	defineExpose({
		initCalendar
	})
</script>
<style lang="scss" scoped>
	.component-cont {
		.ledger-query {
			display: flex;
			justify-content: center;
			align-items: center;

			.ledger-query-radio {
				margin-left: 35px;
				display: flex;
				align-items: center;

				&:first-child {
					margin-left: 0;
				}
			}

			.ledger-query-radio-check {
				position: relative;
				width: 15px;
				height: 15px;
				border-radius: 15px;
				border: 1px solid $theme-color;
				background-color: #fff;

				&::before {
					content: '';
					position: absolute;
					top: 1px;
					left: 1px;
					width: 13px;
					height: 13px;
					border-radius: 13px;
					background-color: #fff;
				}

				&.active::before {
					background-color: $theme-color;
				}
			}

			.ledger-query-radio-label {
				margin-left: 5px;
				color: #666;
				font-size: 13px;
			}
		}

		.ledger-calendar {
			margin-top: 15px;
			display: flex;
			flex-wrap: wrap;

			.ledger-calendar-item {
				margin-left: 3px;
				padding: 5px 0;
				width: calc(14.28% - 3px);
				min-height: 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-radius: 3px;
				background-color: #F2F3F9;

				&:nth-child(7n + 1) {
					margin-left: 0;
				}

				&:nth-child(n + 8) {
					margin-top: 3px;
				}
			}

			.ledger-calendar-item-day,
			.ledger-calendar-item-money {
				color: #333;
				font-size: 13px;
				// line-height: 36rpx;
				font-weight: 600;
				text-align: center;
			}

			.ledger-calendar-item-money {
				font-size: 11px;
				// line-height: 30rpx;
			}

			.ledger-calendar-active {
				background-color: $theme-color;

				.ledger-calendar-item-day,
				.ledger-calendar-item-money {
					color: #fff;
				}
			}
		}
	}
</style>